<template>
    <el-row>
        <el-col :span="8">
            <el-select v-model="sSheng"
                       @change="fShengChange">
                <el-option v-for="oItem in aTree"
                           :key="oItem.p"
                           :label="oItem.p"
                           :value="oItem.p"
                           placeholder="请选择">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-select v-model="sShi"
                       @change="fShiChange">
                <el-option v-for="oItem in aShi"
                           :key="oItem.n"
                           :label="oItem.n"
                           :value="oItem.n"
                           placeholder="请选择">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-select v-model="sQu">
                <el-option v-for="oItem in aQu"
                           :key="oItem.s"
                           :label="oItem.s"
                           :value="oItem.s"
                           placeholder="请选择">
                </el-option>
            </el-select>
        </el-col>
    </el-row>
</template>

<script>
    import aCity from './citylinkage/city.json';
    export default {
        data() {
            return {
                sSheng: '',//省
                sShi: '',//市
                sQu: '',//区
                aTree: aCity
            };
        },
        computed: {
            //计算市数据
            aShi() {
                let aData = [];
                this.aTree.some(oItem => {
                    if (oItem.p === this.sSheng) {
                        aData = oItem.c;
                        return true;
                    }
                });
                return aData;
            },
            //计算区数据
            aQu() {
                let aData = [];
                this.aShi.some(oItem => {
                    if (oItem.n === this.sShi) {
                        aData = oItem.a;
                        return true;
                    }
                });
                return aData;
            }
        },
        methods: {
            //接口：获取级联数据
            fGetData() {
                return {
                    province: this.sSheng,
                    city: this.sShi,
                    area: this.sQu
                }
            },
            //接口：设置级联数据
            fSetData(...args) {
                this.sSheng = args[0];
                this.sShi = args[1];
                this.sQu = args[2];
            },
            //切换省，市和区置空
            fShengChange() {
                this.sShi = this.sQu = '';
            },
            //切换市，区置空
            fShiChange() {
                this.sQu = '';
            },
        }
    };
</script>

<style lang="less" scoped>
    .el-select {
        width: 100%;
    }
</style>